<template>
  <div class="home">
    <LogoHeader></LogoHeader>
    <fun-tabs activeColor="#b0352f" v-model="value">
      <fun-tab-item title="推荐" :name="1"/>
      <fun-tab-item title="金骏眉" :name="2"/>
      <fun-tab-item title="大红袍" :name="3"/>
      <fun-tab-item title="铁观音" :name="4"/>
      <fun-tab-item title="绿茶" :name="5"/>
      <fun-tab-item title="紫砂壶" :name="6"/>
      <fun-tab-item title="漳平水仙" :name="7"/>
      <fun-tab-item title="普洱" :name="8"/>
      <fun-tab-item title="正山小种" :name="9"/>
      <fun-tab-item title="茉莉花茶" :name="10"/>
      <fun-tab-item title="建盏" :name="11"/>
      <fun-tab-item title="大师壶" :name="12"/>
      <fun-tab-item title="茶具" :name="13"/>
    </fun-tabs>

    <section ref="section">
      <div>
          <Swiper></Swiper>
          <Icons></Icons>
          <Recommend></Recommend>
          <Like :likeList="likeList"></Like>
      </div>
    </section>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import LogoHeader from '../components/common/LogoHeader.vue'
import Swiper from '@/components/home/Swiper'
import Icons from '@/components/home/Icons'
import Recommend from '@/components/home/Recommend'
import Like from '@/components/home/Like'
import Tabbar from '@/components/common/Tabbar'
//引入fun-tab
import { FunTabs, FunTabBar, FunTabItem } from 'fun-tab'
import 'fun-tab/dist/index.css'
//引入better-scroll
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import ObserveImage from '@better-scroll/observe-image'
import { get_goods_all } from '@/api/goodsApi.js'

import { ref, reactive, onMounted, watch, computed } from 'vue'

const value = ref(1)

const likeList = reactive( await get_goods_all(1, 8) )

//设置页面滚动
const section = ref()
onMounted(() => {
  BScroll.use(ObserveDOM)
  BScroll.use(ObserveImage)
  new BScroll(section.value, {
    observeDOM: true,
    observeImage: true,
    click: true
  })
})

</script>

<style lang="less" scoped>
.home{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  
  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;
  }

  .fun-tabs{
    border-bottom: none;
  }
}


</style>